<template>
  <el-row class="board-page-wrapper">
    <section class="query-container">
      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">学年</span>
          <el-select size="small" v-model="query.studyYearChoose">
            <el-option
              v-for="(item, index) in studyYearList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">学期</span>
          <el-select size="small" v-model="query.studySemesterChoose">
            <el-option
              v-for="(item, index) in studySemesterList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">考试名称</span>
          <el-select size="small" v-model="query.examNameChoose">
            <el-option
              v-for="(item, index) in examNameList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">考试日期</span>
          <el-date-picker v-model="query.testDate" type="date" size="small" placeholder="选择日期"> </el-date-picker>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">考试编号</span>
          <el-select size="small" v-model="query.testNameChoose">
            <el-option
              v-for="(item, index) in testNameList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">考试地点</span>
          <el-select size="small" v-model="query.testAddressChoose">
            <el-option
              v-for="(item, index) in testAddressList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">课程</span>
          <el-select size="small" v-model="query.courseChoose">
            <el-option
              v-for="(item, index) in courseList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">教学班</span>
          <el-select size="small" v-model="query.teachingChoose">
            <el-option
              v-for="(item, index) in teachingList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">开课学院</span>
          <el-select size="small" v-model="query.openCollegeChoose">
            <el-option
              v-for="(item, index) in openCollegeList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">考试方式</span>
          <el-select size="small" v-model="query.testModeChoose">
            <el-option
              v-for="(item, index) in testModeList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">年级</span>
          <el-select size="small" v-model="query.gradeChoose">
            <el-option
              v-for="(item, index) in gradeList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">学生学院</span>
          <el-select size="small" v-model="query.studentCollegeChoose">
            <el-option
              v-for="(item, index) in studentCollegeList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <span class="query-label">专业</span>
          <el-select size="small" v-model="query.majorChoose">
            <el-option
              v-for="(item, index) in majorList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="query-label">专业</span>
          <el-select size="small" v-model="query.classChoose">
            <el-option
              v-for="(item, index) in classList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12" style="display: flex;flex-direction: row-reverse;">
          <el-button size="small" style="margin-left: 10px;" @click="resetQuery">清空</el-button>
          <el-button size="small">搜索</el-button>
        </el-col>
      </el-row>
    </section>
    <section class="board-table-wrapper">
      <el-table :data="tableData" :border="true" style="width: 100%" ref="table">
        <el-table-column type="selection" width="45" align="center"> </el-table-column>
        <el-table-column prop="id" label="学年" align="center"> </el-table-column>
        <el-table-column prop="month" label="学期" align="center"> </el-table-column>
        <el-table-column prop="departName" label="考试名称" align="center"> </el-table-column>
        <el-table-column prop="name" label="开课学院" align="center"> </el-table-column>
        <el-table-column prop="idCard" label="学生学院" align="center"> </el-table-column>
        <el-table-column prop="levelSalary" label="课程名称" align="center"> </el-table-column>
        <el-table-column prop="postSalary" label="试卷编号" align="center"> </el-table-column>
        <el-table-column prop="serviceAllowance" label="开始时间" align="center"> </el-table-column>
        <el-table-column prop="achieveAllowance" label="考试地点" align="center"> </el-table-column>
        <el-table-column prop="achieveAllowance" label="考试人数" align="center"> </el-table-column>
        <el-table-column prop="achieveAllowance" label="主监考教师" align="center"> </el-table-column>
      </el-table>
    </section>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        query: {
          studyYearChoose: ''
        },

        studyYearList: [
          {
            label: '2020',
            id: '1'
          },
          {
            label: '2021',
            id: '2'
          }
        ],
        studySemesterList: [{ label: 1, id: 1 }],
        examNameList: [],
        testNameList: [],
        testAddressList: [],
        courseList: [],
        teachingList: [],
        openCollegeList: [],
        testModeList: [],
        gradeList: [],
        studentCollegeList: [],
        majorList: [],
        classList: [],
        tableData: [
          {
            id: 1010206020,
            month: '20201221',
            departName: '致远楼B602'
          }
        ]
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.table.doLayout() //解决表格错位
      })
    },
    methods: {
      resetQuery() {
        this.query = {}
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  .board-page-wrapper {
    padding: 10px;
    .query-container {
      padding: 10px 30px;
      display: flex;
      margin-left: -15px;
      margin-right: -15px;
      flex-wrap: wrap;
      .el-row {
        line-height: 32px;
        padding: 5px 15px;
        width: 100%;
        .el-col {
          display: flex;
          flex-wrap: nowrap;
          .query-label {
            width: 70px;
            text-align: right;
            margin-right: 5px;
          }
          .el-input,
          .el-select {
            width: calc(100% - 70px);
          }
          .two-box {
            display: flex;
          }
          .option-box {
            display: flex;
            width: 100%;
            flex: 1;
            justify-content: space-between;
          }
        }
      }
      & > div {
        line-height: 32px;
        padding: 0 15px;
      }
    }
  }
</style>
